<!--
/**
 * Created by PhpStorm.
 * User: Devmc
 * Date: 2021/4/22
 * Time: 13:00
 */
-->
<template>
  <el-form :inline="true" border :model="value" class="table-search">
    <el-col :span="24">
      <template v-for="(item, index) in form">
        <!-- input -->
        <el-form-item v-if="item.type == 'input'"
                      :key="item.name + '-' + index"
                      :label="item.label">
          <el-input v-model="value[item.name]" :placeholder="item.placeholder"></el-input>
        </el-form-item>

        <!-- daterange -->
        <el-form-item v-else-if="item.type == 'daterange'"
                      :key="item.name + '-' + index">
          <span>{{ item.label }}</span>
          <el-date-picker
              v-model="value[item.name]"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <!-- button -->
        <el-form-item v-else-if="item.type == 'button'"
                      :key="item.name + '-' + index">
          <el-button
              :type="item.buttonType || 'success'"
              :icon="item.icon || (item.isSearch ? 'el-icon-search' : '')"
              @click="item.click && item.click(value)">
            {{ item.text || (item.isSearch ? '查询' : '') }}
          </el-button>
        </el-form-item>
      </template>
    </el-col>
  </el-form>
</template>

<script>
export default {
  name: "TableSearch",
  props: {
    /**
     [
     {
          type: 'input',
          name: 'content',
          label: '搜索',
          placeholder: '请输入关键字'
        },
     {
          type: 'daterange',
          name: 'daterange',
          label: '选择时间：',
        },
     {
          type: 'button',
          name: 'button1',
          isSearch: true,
          click: this.search
        },
     {
          type: 'button',
          name: 'button2',
          icon: '',
          isSearch: false,
          text: '其他',
          buttonType: 'success',
          click: () => {
          }
        }
     ]
     */
    form: Array
  },
  data() {
    return {
      value: {}
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {},
  watch: {}
}
</script>

<style lang="less">
.table-search {
  padding-left: 20px;
  padding-top: 20px;
}
</style>